import {XFilled, SaveOutlined, EditOutlined, UndoOutlined, RedoOutlined, SelectOutlined, ColumnWidthOutlined} from '@ant-design/icons'
import Button from './button';
import { Divider, Tooltip, ColorPicker, Popover,Slider, InputNumber } from 'antd';
// import penSetting from './option/penSetting';
// import { useState } from 'react'

function toolBar({setColor, saveFile, undo, redo, nowColor, lineWidth,changeLineWidth, mode, setMode}) {
    const userDefinedColor =(v) => {
        console.log('%c 看看返回的啥', 'color:#013', v)
        setColor(v.toHexString())
    }
    const draw = (<div className='flex'>
        <div className='grow'>
            <Slider
                min={1}
                max={20}
                value={lineWidth}
                onChange={changeLineWidth}
                step={1}
            />
        </div>
        <div>
            <InputNumber
                min={1}
                value={lineWidth}
                onChange={changeLineWidth}
                step={1}
            />
        </div>
    </div>)
    return (<div className='toolbar'>
        <Tooltip placement="top" title="保存">
            <Button onClick={saveFile}><SaveOutlined className='text-black' /></Button>
        </Tooltip>
        <Tooltip placement="top" title="撤销">
            <Button onClick={undo}><UndoOutlined className='text-black' /></Button>
        </Tooltip>
        <Tooltip placement="top" title="重做">
            <Button onClick={redo}><RedoOutlined className='text-black' /></Button>
        </Tooltip>
        <Tooltip placement="top" title="瞎画">
            <Button onClick={() => setMode('draw')} active={mode=='draw'}><EditOutlined className='text-black' /></Button>
        </Tooltip>
        
        <Tooltip placement="top" title="选中">
            <Button onClick={() => setMode('select')} active={mode=='select'}><SelectOutlined className='text-black' /></Button>
        </Tooltip>
        <Divider type="vertical" />
        <Button onClick={()=>setColor('#000')}><XFilled style={{color: '#000'}} /></Button>
        <Button onClick={()=>setColor('#00F')}><XFilled style={{color: '#00F'}} /></Button>
        <Button onClick={()=>setColor('#0F0')}><XFilled style={{color: '#0F0'}} /></Button>
        <Button onClick={()=>setColor('#0FF')}><XFilled style={{color: '#0FF'}} /></Button>
        <Button onClick={()=>setColor('#F00')}><XFilled style={{color: '#F00'}} /></Button>
        <ColorPicker disabledAlpha defaultValue={nowColor} onChange={userDefinedColor} >
            <Button>
                <XFilled style={{color: nowColor}} />
            </Button>
        </ColorPicker>
        <Popover placement="top" title="线宽" content={draw}  trigger="click">
            <Tooltip placement="top" title="线宽">
                <Button onClick={() => 1}><ColumnWidthOutlined className='text-black' /></Button>
            </Tooltip>
        </Popover>
    </div>)
}
export default toolBar